<template>
  <div class="relative">
    <!-- 标签 -->
    <label v-if="label" :for="id" class="block text-sm font-medium mb-2 text-text-primary">
      {{ label }}
      <span v-if="required" class="text-red-500 ml-1 font-bold">*</span>
    </label>

    <!-- 文本域容器 -->
    <div class="relative">
      <textarea
        :id="id"
        ref="textareaRef"
        v-model="textareaValue"
        :placeholder="placeholder"
        :disabled="disabled"
        :required="required"
        :rows="rows"
        :class="textareaClasses"
        :style="{ borderRadius: '8px !important' }"
        @input="handleInput"
        @focus="handleFocus"
        @blur="handleBlur"
        @keydown="handleKeydown"
      ></textarea>
    </div>

    <!-- 错误信息 -->
    <p v-if="error" class="mt-1 text-sm text-error">{{ error }}</p>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

interface Props {
  modelValue?: string
  label?: string
  placeholder?: string
  disabled?: boolean
  required?: boolean
  error?: string
  size?: 'sm' | 'md' | 'lg'
  variant?: 'default' | 'outline' | 'filled'
  rows?: number
  id?: string
}

const props = withDefaults(defineProps<Props>(), {
  placeholder: '',
  disabled: false,
  required: false,
  size: 'md',
  variant: 'default',
  rows: 3,
  id: () => `textarea-${Math.random().toString(36).substr(2, 9)}`
})

const emit = defineEmits<{
  'update:modelValue': [value: string]
  'change': [value: string]
  'focus': [event: FocusEvent]
  'blur': [event: FocusEvent]
  'input': [event: Event]
}>()

// 响应式状态
const textareaRef = ref<HTMLTextAreaElement>()

// 计算属性
const textareaValue = computed({
  get: () => props.modelValue || '',
  set: (value) => emit('update:modelValue', value)
})

// 样式类
const textareaClasses = computed(() => {
  const baseClasses = [
    'w-full text-sm font-medium transition-all duration-200 resize-none',
    'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-background-900',
    'disabled:opacity-50 disabled:cursor-not-allowed'
  ]

  const sizeClasses = {
    sm: 'px-2 py-1.5 text-xs',
    md: 'px-3 py-2 text-sm',
    lg: 'px-4 py-3 text-base'
  }

  const variantClasses = {
    default: [
      'bg-background-800 border border-background-600 rounded-lg !rounded-lg',
      'hover:bg-background-700 hover:border-background-500',
      'focus:ring-primary-500 focus:border-primary-500'
    ],
    outline: [
      'bg-transparent border border-background-600 rounded-lg !rounded-lg',
      'hover:bg-background-800 hover:border-background-500',
      'focus:ring-primary-500 focus:border-primary-500'
    ],
    filled: [
      'bg-background-700 border border-background-600 rounded-lg !rounded-lg',
      'hover:bg-background-600 hover:border-background-500',
      'focus:ring-primary-500 focus:border-primary-500'
    ]
  }

  const errorClasses = props.error ? 'border-error focus:ring-error' : ''

  return [
    ...baseClasses,
    sizeClasses[props.size],
    variantClasses[props.variant],
    errorClasses,
    'text-text-primary placeholder-text-muted'
  ].join(' ')
})

// 事件处理
const handleInput = (event: Event) => {
  emit('input', event)
}

const handleFocus = (event: FocusEvent) => {
  emit('focus', event)
}

const handleBlur = (event: FocusEvent) => {
  emit('blur', event)
}

const handleKeydown = (event: KeyboardEvent) => {
  // 可以在这里添加键盘事件处理
}

// 暴露方法
defineExpose({
  focus: () => textareaRef.value?.focus(),
  blur: () => textareaRef.value?.blur(),
  select: () => textareaRef.value?.select()
})
</script>
